@import '../variables';
@import './element-variables';

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

input, button, textarea {
    font-family: inherit !important;
}

.el {
    // link
    &-link {
       &--text-hide {
           & .el-link--inner {
               width: 100%;
           }
           width: 100%;
       }
    }
    // from 表单
    &-form {
        &-item {
            // 错误
            &.is-error {
                .el-input {
                    &__inner {
                        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .15s ease-in-out;;
                        &:focus {
                            position: relative;
                            outline: 0;
                            box-shadow: 0 0 0 .2rem rgba($--color-danger, .15);
                            border-color: rgba($--color-danger, .7);
                            z-index: 1;
                        }
                    }
                }
            }
        }
    }

    // input/textarea 输入框
    &-textarea,
    &-input,
    &-input.is-focus{
        &__inner {
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .15s ease-in-out;
            &:focus {
                position: relative;
                outline: 0;
                box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
                border-color: rgba($--color-primary, .7);
                //z-index: 1;
            }
        }

        // 组
        &-group--append {
            .el-input__inner {
                &:focus {
                    z-index: 1;
                }
            };

        }
    }

    // 按钮
    &-button {
        & [class*=r-icon-] + span {
            margin-left: 5px;
        }
        &:focus {
            position: relative;
            outline: 0;

            z-index: 1;
        }
        &--default,
        &--primary {
            &:focus {
                box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
            }
        }
        &--info {
            &:focus {
                box-shadow: 0 0 0 .2rem rgba($--color-info, .25);
            }
        }
        &--success {
            &:focus {
                box-shadow: 0 0 0 .2rem rgba($--color-success, .25);
            }
        }
        &--warning {
            &:focus {
                box-shadow: 0 0 0 .2rem rgba($--color-warning, .25);
            }
        }
        &--danger {
            &:focus {
                box-shadow: 0 0 0 .2rem rgba($--color-danger, .25);
            }
        }
        &--black {
            color: #fff;
            background-color: $--color-black;
            border-color: $--color-black;
            &:hover {
                color: #fff;
                background-color: mix($--color-black, $--color-white, 70%);
                border-color: mix($--color-black, $--color-white, 70%);
            }
            &:focus {
                background-color: mix($--color-black, $--color-white, 90%);
                border-color: mix($--color-black, $--color-white, 90%);
                box-shadow: 0 0 0 .2rem rgba($--color-black, .25);
            }
        }
        &--mini--small {
            adding: 4px 8px;
            &.is-round {
                padding: 4px 8px;
            }
        }
    }

    // 标签
    &-tag {
        &.is-round {
            border-radius: 20px;
        }
        &--black {
            color: mix($--color-black, $--color-white, 90%);
            background-color: mix($--color-black, $--color-white, 15%);
            border-color: mix($--color-black, $--color-white, 30%);
        }
        &--dark.el-tag--black {
            color: #fff;
            background-color: $--color-black;
            border-color: $--color-black;
        }
        &--light.el-tag--black {
            color: mix($--color-black, $--color-white, 90%);
            background-color: mix($--color-black, $--color-white, 15%);
            border-color: mix($--color-black, $--color-white, 30%);
        }
        &--plain.el-tag--black {
            color: $--color-black;
            background-color: #fff;
            border-color: mix($--color-black, $--color-white, 50%);
        }

        &--v0 {
            color: #fff;
            background-color: #333;
            border-color: #333;
        }
        &--v1 {
            color: #fff;
            background-color: $--color-vip-1;
            border-color: $--color-vip-1;
        }
        &--v2 {
            color: #fff;
            background-color: $--color-vip-2;
            border-color: $--color-vip-2;
        }
        &--v3 {
            color: #fff;
            background-color: $--color-vip-3;
            border-color: $--color-vip-3;
        }
    }

    // table 表格
    &-table {
        .cell {
            overflow: unset;
        }
    }

    // dialog 对话框
    &-dialog {
        overflow: hidden;
        border-radius: $--border-radius-base;
        &__body {
            padding: 20px 30px 30px !important;
        }
    }

    // 范围选择
    &-range {
        &-editor.el-input__inner {
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .15s ease-in-out;
            &.is-active {
                border-color: rgba($--color-primary, .7);
                box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
                &:hover {
                    position: relative;
                    outline: 0;
                    box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
                    z-index: 1;
                }
            }
        }
    }

    // scrollbar 滚动条
    &-scrollbar {
        //&__wrap {
        //    overflow-x: hidden;
        //}
        &__bar {
            &.is-vertical {
                top: 2px;
                right: 2px;
                bottom: 2px;
            }
            &.is-horizontal {
                right: 2px;
                bottom: 2px;
                left: 2px;
            }
        }
    }
}

// from 表单
//.el-form {
//    &-item {
//        // 错误
//        &.is-error {
//            .el-input {
//                &__inner {
//                    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .15s ease-in-out;;
//                    &:focus {
//                        position: relative;
//                        outline: 0;
//                        box-shadow: 0 0 0 .2rem rgba($--color-danger, .15);
//                        border-color: rgba($--color-danger, .7);
//                        z-index: 1;
//                    }
//                }
//            }
//        }
//    }
//}
//
//// input 输入框
//.el-textarea,
//.el-input {
//    &__inner {
//        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .15s ease-in-out;;
//        &:focus {
//            position: relative;
//            outline: 0;
//            box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
//            border-color: rgba($--color-primary, .7);
//            z-index: 1;
//        }
//    }
//}
//
//// icon 图标
//[class^=el-icon-] {
//    line-height: inherit !important;
//}
//
//// button 按钮图标
//.el-button {
//    & [class*=r-icon-] + span {
//        margin-left: 5px;
//    }
//    &:focus {
//        position: relative;
//        outline: 0;
//
//        z-index: 1;
//    }
//    &--default,
//    &--primary {
//        &:focus {
//            box-shadow: 0 0 0 .2rem rgba($--color-primary, .15);
//        }
//    }
//    &--info {
//        &:focus {
//            box-shadow: 0 0 0 .2rem rgba($--color-info, .25);
//        }
//    }
//    &--success {
//        &:focus {
//            box-shadow: 0 0 0 .2rem rgba($--color-success, .25);
//        }
//    }
//    &--warning {
//        &:focus {
//            box-shadow: 0 0 0 .2rem rgba($--color-warning, .25);
//        }
//    }
//    &--danger {
//        &:focus {
//            box-shadow: 0 0 0 .2rem rgba($--color-danger, .25);
//        }
//    }
//}
//
//// scrollbar 滚动条
//.el-scrollbar {
//    //&__wrap {
//    //    overflow-x: hidden;
//    //}
//    &__bar {
//        &.is-vertical {
//            top: 2px;
//            right: 2px;
//            bottom: 2px;
//        }
//        &.is-horizontal {
//            right: 2px;
//            bottom: 2px;
//            left: 2px;
//        }
//    }
//}
//
//// table 表格
//.el-table {
//    .cell {
//        overflow: unset;
//    }
//}
